<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>

    <style>
        /*后代选择器*/
        div span{
            color:red;
        }

        /*子代选择器*/
        div>span{
            background: orange;
        }

       /*  通过子代选择器， 让p中的span为斜体   */

        div>p>span{
            font-style:italic;
        }

    </style>
</head>
<body>
    <div>
        <h1>春晓</h1>

        <span>孟浩然</span>

        <p>春眠不觉晓</p>

        <p>
            处处闻<span>啼鸟</span>
        </p>

        <p>
            夜来<span>风雨</span>声
        </p>
        <p>花落知多少</p>
    </div>
</body>
</html>